<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>工具提示插件</title>
    <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
<h2><pre>
   工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，
    它的调用格式如下：$(selector).tooltip({options});
   其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。
</pre></h2>
<div id="divtest">
    <div class="title">
        工具提示插件</div>
    <div class="content">
        <div>
            <label for="name">
                姓名</label>
            <input id="name" name="name" title="我是土豪，欢迎与我做朋友" />
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $("#name").tooltip({
            show: {
                effect: "slideDown",
                delay: 350
            },
            hide: {
                effect: "explode",
                delay: 350
            },
            position: {
                my: "left top",
                at: "left bottom"
            }
        });
    });
</script>
</body>
</html>